<!--
 * @Descripttion: 销售单列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:51:53
 -->
<template>
  <div>
    <el-card shadow="never" class="oper-btn-card">
      <div class="clearfix">
        <el-form
          class="fl form-no-bottom"
          :inline="true"
          :model="searchData"
          label-position="left"
          label-width="80px"
          @keydown.enter.native="btnSearch"
        >
          <el-form-item>
            <el-input
              v-model="searchData.keywords"
              clearable
              style="width: 360px"
              placeholder="按单据号,商品名,供应商,备注"
            />
            <el-button type="primary" :loading="btnLoading.search" @click="btnSearch()">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="margin-t2">
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :row-class-name="(({row}) => { return row.isCancle === '1' ? 'is-cancle' : ''})"
        :loading="tableLoading.table"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="clearfix">
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listWaite2ReturnBillsPage, cancleBill } from '@/api/bill/bill-sale-return.js'
import { getSelectButton } from '@/components/Table/oper-btns.js'
import clonedeep from 'clonedeep'
import { getBusinessTime } from '@/libs/util.js'

export default {
  name: 'SaleList',
  filters: {
  },
  components: { },
  mixins: [oftenuse],
  props: {
    operation: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      searchData: { isCancle: '0', saleType: '-1', stockStatus: '-1', dateTab: 3 },
      optionsData: {},
      isFilterOpen: false,
      columnsData: [
        { title: '操作', width: this.operation === 'select' ? 80 : 120,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const selectNode = getSelectButton(h, { on: { click: () => { this.btnSelectData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [selectNode])
              return [divNode]
            }
          }
        },
        { field: 'billNo', title: '单据', width: 150 },
        { field: 'billRelationNo', title: '关联单据', width: 160 },
        { field: 'businessTime', title: '业务日期', showOverflow: true, width: 120,
          slots: {
            default: (params) => {
              const { row, column } = params
              return [getBusinessTime(row[column.property])]
            }
          }
        },
        { field: 'comegoName', title: '客户名称', showOverflow: true, width: 200 },
        { field: 'goodsNamestr', title: '销售商品', showOverflow: true, width: 200 },
        { field: 'goodsQuantity', title: '销售数量', width: 100 },
        { field: 'amountDiscount', title: '折扣金额', width: 100 },
        { field: 'amountPayable', title: '销售毛利', width: 100 },
        { field: 'amountPayable', title: '总计金额', width: 100 },
        { field: 'amountPaid', title: '实收金额', width: 100 }
      ]
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.listData()
  },
  methods: {
    btnSelectData(row) {
      this.$emit('on-select', clonedeep(row))
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.pageInfo.current = 1
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // api
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      if (params.data.date) {
        const data = params.data
        data.beginDate = data.date[0]
        data.endDate = data.date[1]
      }
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listWaite2ReturnBillsPage(params).then(res => {
          this.setTableLoading('table', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('table', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          reject(err)
          this.setTableLoading('table', false)
        })
      })
    },
    cancleBill(id) {
      return cancleBill(id).then(res => {
        if (!res.data.flag) return this.$notify.error({ title: '作废失败！', message: res.data.message || '' })
        this.listData()
        this.$notify.success({ title: '作废成功！' })
      }).catch(err => {
        this.$notify.error({ title: '作废异常！', message: err })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('customer', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
